<template>
    <!-- 
    <b-modal ref="my-modal" hide-footer title="Using Component Methods">
     <div class="d-block text-center">
       <h3>Hello From My Modal!</h3>
     </div>
     <b-button class="mt-3" variant="outline-danger" block @click="hideModal">Close Me</b-button>
     <b-button class="mt-2" variant="outline-warning" block @click="toggleModal">Toggle Me</b-button>
   </b-modal> 
    -->
    <!--
        body-class="modalStyle" 表示样式
        size="lg" 表示模态窗口大小 xl,lg,sm,full
        hide-footer 表示隐藏底部按钮
        hide-header 表示隐藏头部内容
        no-close-on-backdrop 表示鼠标点击背景不可关闭
        hide-header-close 表示隐藏头部关闭按钮
        centered 居中
        ok-title=“确定” 
        cancel-title=取消
        @ok="handleOk" 
        @cancel="handleCancel"
        scrollable 滚动条
        hide-backdrop 隐藏背景
        wrapClassName="ant-modal-cust-warp" 
        style="top:5%;height: 85%;overflow-y: hidden" 样式
    -->
    <b-modal ref="my-modal" size="xl" title="编辑用户" scrollable no-close-on-backdrop centered>
        <div class="d-block text-center">
            <!--begin::Form-->
            <form class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed" method="post">
                <div class="m-portlet__body">
                    <div class="form-group m-form__group row">                        
                        <div class="col-md-1" >
                            <label class="col-form-label" jEhcLang="xt_departinfo_name">部&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;门</label>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group input-group">
                                <input type="hidden" maxlength="32" v-model="userInfoForm.xt_departinfo_id" ><!--定义部门id值变化状态-->
                                <input class="form-control" type="text" maxlength="32" readonly="readonly" v-model="userInfoForm.xt_departinfo_name" placeholder="请选择">
                                <span class="input-group-btn">
                                    <a class="btn btn-default" @click="showDepartSelectModal()">
                                        选择
                                    </a>
                                </span>
                            </div>
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="xt_post_id">岗&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位</label>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group input-group">
                                <input type="hidden" maxlength="32" v-model="userInfoForm.xt_post_id">
                                <input class="form-control" type="text"  maxlength="32" readonly="readonly" v-model="userInfoForm.xt_post_name" placeholder="请选择">
                                <span class="input-group-btn" style="margin-left: 0px;">
                                    <button class="btn btn-default" type="button"  @click="showPostSelectModal()">
                                        选择
                                    </button>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="xt_userinfo_name">账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</label>
                        </div>
                        <div class="col-md-2">
                            <input class="form-control" type="text" maxlength="64" style="width: 150px;" v-model="userInfoForm.xt_userinfo_name" placeholder="请输入">
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="xt_userinfo_sex">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</label>
                        </div>
                        <div class="col-md-2">
                            <el-select style="width: 150px;" v-model="userInfoForm.xt_userinfo_sex" >
                                <el-option value="">请选择</el-option>
                                <el-option 
                                    v-for="item in genderList"
                                    :key="item.xt_data_dictionary_id"
                                    :label="item.xt_data_dictionary_name"
                                    :value="item.xt_data_dictionary_id"></el-option>
                            </el-select>
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="xt_userinfo_birthday">出生年月</label>
                        </div>
                        <div class="col-md-2">
                            <el-date-picker
                            v-model="userInfoForm.xt_userinfo_birthday"                            
                            type="date"
                            align="left"
                            style="width:150px"
                            placeholder="选择出生年月"
                            value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                            :picker-options="pickerOptions">
                            </el-date-picker>
                        </div>
                        <div class="col-md-1"></div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="xt_userinfo_realName">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
                        </div>
                        <div class="col-md-2">
                            <input class="form-control" type="text" style="width: 150px;" maxlength="30" v-model="userInfoForm.xt_userinfo_realName" placeholder="请输入">
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="xt_userinfo_ismarried">婚姻状况</label>
                        </div>
                        <div class="col-md-2">
                            <el-select  maxlength="32"  style="width: 150px;" v-model="userInfoForm.xt_userinfo_ismarried" placeholder="请选择">
                                <el-option value="">请选择</el-option>
                                <el-option 
                                    v-for="item in marriedList"
                                    :key="item.xt_data_dictionary_id"
                                    :label="item.xt_data_dictionary_name"
                                    :value="item.xt_data_dictionary_id"></el-option>
                            </el-select>
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="xt_userinfo_card">身份证号</label>
                        </div>
                        <div class="col-md-2">
                            <input class="form-control" type="text" maxlength="20"  v-model="userInfoForm.xt_userinfo_card" placeholder="请输入">
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="xt_userinfo_nation">名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;族</label>
                        </div>
                        <div class="col-md-2">
                            <el-select maxlength="32" v-model="userInfoForm.xt_userinfo_nation" placeholder="请选择" >
                                <el-option value="">请选择</el-option>
                                <el-option 
                                    v-for="item in nationList"
                                    :key="item.xt_data_dictionary_id"
                                    :label="item.xt_data_dictionary_name"
                                    :value="item.xt_data_dictionary_id"></el-option>
                            </el-select>
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="xt_userinfo_origo">籍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贯</label>
                        </div>
                        <div class="col-md-2">
                            <input class="form-control" type="text" maxlength="20"  v-model="userInfoForm.xt_userinfo_origo" placeholder="请输入">
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="xt_userinfo_schoolName">毕业学校</label>
                        </div>
                        <div class="col-md-2">
                            <input class="form-control" type="text" maxlength="64" v-model="userInfoForm.xt_userinfo_schoolName" placeholder="请输入">
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="xt_userinfo_phone">联系电话</label>
                        </div>
                        <div class="col-md-2">
                            <input class="form-control" type="text" maxlength="30" v-model="userInfoForm.xt_userinfo_phone" placeholder="请输入">
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="xt_userinfo_mobile">移动电话</label>
                        </div>
                        <div class="col-md-2">
                            <input class="form-control" type="text" maxlength="20" v-model="userInfoForm.xt_userinfo_mobile" placeholder="请输入">
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="xt_userinfo_ortherTel">其它电话</label>
                        </div>
                        <div class="col-md-2">
                            <input class="form-control" type="text" maxlength="20" v-model="userInfoForm.xt_userinfo_ortherTel" placeholder="请输入">
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="xt_userinfo_remark">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</label>
                        </div>
                        <div class="col-md-8">
                            <textarea class="form-control" rows="2" maxlength="200" v-model="userInfoForm.xt_userinfo_remark" placeholder="请输入"></textarea>
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="xt_userinfo_address">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址</label>
                        </div>
                        <div class="col-md-3">
                            <input class="form-control" type="text" maxlength="255" v-model="userInfoForm.xt_userinfo_address" placeholder="请输入">
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="xt_userinfo_intime">入职时间</label>
                        </div>
                        <div class="col-md-2">
                            <el-date-picker
                            align="left"
                            style="width:150px"
                            type="date"
                            v-model="userInfoForm.xt_userinfo_intime"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                            :picker-options="pickerOptions">
                            </el-date-picker>
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="xt_userinfo_outTime">离职时间</label>
                        </div>
                        <div class="col-md-2">
                            <el-date-picker
                                v-model="userInfoForm.xt_userinfo_outTime"
                                align="left"
                                style="width:150px"
                                type="date"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                                :picker-options="pickerOptions">
                                </el-date-picker>
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="xt_userinfo_contractTime">到期时间</label>
                        </div>
                        <div class="col-md-2">
                            <el-date-picker
                                v-model="userInfoForm.xt_userinfo_contractTime"
                                align="left"
                                style="width:150px"
                                type="date"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                                :picker-options="pickerOptions">
                            </el-date-picker>
                        </div>
                        <div class="col-md-1"></div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="xt_userinfo_qq">QQ号码</label>
                        </div>
                        <div class="col-md-2">
                            <input class="form-control" type="text" maxlength="12"  style="width: 150px;" v-model="userInfoForm.xt_userinfo_qq" placeholder="请输入">
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="xt_userinfo_email">电子邮件</label>
                        </div>
                        <div class="col-md-2">
                            <input class="form-control" type="text" maxlength="50" style="width: 150px;" v-model="userInfoForm.xt_userinfo_email" placeholder="请输入">
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="xt_userinfo_state">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态</label>
                        </div>
                        <div class="col-md-2">
                            <el-select maxlength="32" style="width: 150px;" v-model="userInfoForm.xt_userinfo_state" placeholder="请选择">
                                <el-option value="">请选择</el-option>
                                <el-option 
                                    v-for="item in stateList"
                                    :key="item.xt_data_dictionary_id"
                                    :label="item.xt_data_dictionary_name"
                                    :value="item.xt_data_dictionary_id"></el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="xt_userinfo_politicalStatus">政治面貌</label>
                        </div>
                        <div class="col-md-2">
                            <input class="form-control" type="text" maxlength="32"  style="width: 150px;" v-model="userInfoForm.xt_userinfo_politicalStatus" placeholder="请输入">
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label" jEhcLang="xt_userinfo_highestDegree">文化程度</label>
                        </div>
                        <div class="col-md-2">
                            <el-select maxlength="32" style="width: 150px;" v-model="userInfoForm.xt_userinfo_highestDegree" placeholder="请选择">
                                <el-option value="">请选择</el-option>
                                <el-option 
                                    v-for="item in highestDegreeList"
                                    :key="item.xt_data_dictionary_id"
                                    :label="item.xt_data_dictionary_name"
                                    :value="item.xt_data_dictionary_id"></el-option>
                            </el-select>
                        </div>
                        <div class="col-md-1">
                            <label class="col-form-label"  jEhcLang="xt_userinfo_workYear">工作年限</label>
                        </div>
                        <div class="col-md-2">
                            <el-select maxlength="32"  style="width: 150px;" v-model="userInfoForm.xt_userinfo_workYear" placeholder="请选择">
                                <el-option value="">请选择</el-option>
                                <el-option 
                                    v-for="item in workYearList"
                                    :key="item.xt_data_dictionary_id"
                                    :label="item.xt_data_dictionary_name"
                                    :value="item.xt_data_dictionary_id"></el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
                <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
                    <div class="m-form__actions m-form__actions--solid">
                        <div class="form-group m-form__group row">
                            <div class="col m--align-left">
                                <!-- <button type="button" class="btn btn-light-primary font-weight-bold mr-2 m-btn m-btn--custom m-btn--icon" onclick="addXtUserinfo()">保存</button>
                                <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--icon" block @click="hideModal">取消</button> -->
                            </div>
                            <div class="col m--align-right">
                                <!-- <a href="javascript:resetAll('defaultForm')" class="btn btn-secondary m-btn m-btn--custom m-btn--icon">
                                    <span><i class="fa fa-repeat"></i><span>重置</span></span>
                                </a> -->
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <!--end::Form-->
        </div>
        <template slot="modal-footer">
            <!--自定义按钮-->
            <button type="button" class="btn btn-light-danger font-weight-bold mr-2" block @click="hideModal">
                <i class="icon-xl fa fa-times"></i>取消
            </button> 
            <button type="button" class="btn btn-light-primary font-weight-bold mr-2" block @click="restForm">
                <i class="icon-2x flaticon2-reply"></i> 重置
            </button> 
            <button type="button" class="btn btn-light-success font-weight-bold mr-2" @click="updateXtUserinfo">
                <i class="icon-xl fas fa-save"></i> 保存
            </button>
        </template>
        <!---定义接收子组件传递值方法，采用change方式-->
        <!---定义接收子组件选择部门，采用change方式-->
        <DepartSelect ref="DepartSelectRef" @change="getSelectDepartData"></DepartSelect>
        <!---定义接收子组件选择岗位，采用change方式-->
        <PostSelect ref="PostSelectRef" @change="getSelectPostData"></PostSelect>
    </b-modal>        
</template>
<script>
import DepartSelect from "@/components/depart-select.vue";
import PostSelect from "@/components/post-select.vue";
import apiUtil from "@/core/util/apiUtil.js"; 
import { handleNotify,handleAlert,handleConfirm,showWating,closeWating,deepClone} from "@/core/util/jehcUtil.js";
export default {
    data(){
        return {
            stateList:[],
            marriedList:[],
            highestDegreeList:[],
            workYearList:[],
            nationList:[],
            genderList:[],

            pickerOptions: {
                // disabledDate(time) {//范围不可选
                //     return time.getTime() > Date.now();
                // },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, 
                {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, 
                {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
        },
        userInfoFormOld: {},//定义原用于重置操作
        xt_userinfo_name_old: "",//定义原用户名
        xt_departinfo_id: "",//定义原部门id        
        userInfoForm:{
            xt_userinfo_id: "",
            xt_userinfo_name: "",
            xt_userinfo_realName: "",
            xt_departinfo_id: "",
            xt_departinfo_name: "",
            xt_post_id: "",
            xt_post_name: "",
            xt_userinfo_sex: "",
            xt_userinfo_birthday: "",
            xt_userinfo_realName: "",
            xt_userinfo_ismarried: "",
            xt_userinfo_card: "",
            xt_userinfo_nation: "",
            xt_userinfo_origo: "",
            xt_userinfo_schoolName: "",
            xt_userinfo_phone: "",
            xt_userinfo_mobile: "",
            xt_userinfo_ortherTel: "",
            xt_userinfo_remark: "",
            xt_userinfo_address: "",
            xt_userinfo_intime: "",
            xt_userinfo_outTime: "",
            xt_userinfo_contractTime: "",
            xt_userinfo_qq: "",
            xt_userinfo_email: "",
            xt_userinfo_state: "",
            xt_userinfo_politicalStatus: "",
            xt_userinfo_highestDegree: "",
            xt_userinfo_workYear: ""
        }
      }
    },
    components: {
        DepartSelect,
        PostSelect
    },
    watch: {
        "userInfoForm.xt_departinfo_id":{//监听字段变化
            handler:function(newVal,old){
                if(this.xt_departinfo_id != newVal){
                    this.userInfoForm.xt_post_id = "";
                    this.userInfoForm.xt_post_name = "";
                    this.xt_departinfo_id = "";
                    if(newVal == "" || newVal == undefined || newVal == null){
                    }else{
                        this.$refs.PostSelectRef.initPostDataList(newVal);
                    }
                }
            }
        },
        "userInfoForm.xt_userinfo_name":{//监听字段变化
            handler:function(newVal,old){
                this.validateUser(newVal);
            }
        }
    },
    mounted() {
        this.initGender();
        this.initNation();
        this.initHighestDegree();
        this.initWorkYear();
        this.initState();
        this.initMarried();
    },
    methods: {
     updateXtUserinfo(){
        if(this.userInfoForm.xt_userinfo_id === ""){
          handleAlert("用户id为空", "warning", 3)
          return;
        }
        if(this.userInfoForm.xt_departinfo_id === ""){
          handleAlert("请选择部门", "warning", 3)
          return;
        }
        if(this.userInfoForm.xt_post_id === ""){
          handleAlert("请选择岗位", "warning", 3)
          return;
        }
        if(this.userInfoForm.xt_userinfo_name === ""){
          handleAlert("请输入账号", "warning", 3)
          return;
        }
        if(this.userInfoForm.xt_userinfo_realName === ""){
          handleAlert("请输入姓名", "warning", 3)
          return;
        }
        if(this.userInfoForm.xt_userinfo_state === ""){
          handleAlert("请选择状态", "warning", 3)
          return;
        }
        // 保存用户前提示
        this.$confirm("确定保存?", "提示", {type: "warning",}).then(() => {
            apiUtil.update(process.env.VUE_APP_SYS_API+"/xtUserinfo/update", this.userInfoForm).then(({ data }) => {
                if(data.success){
                    handleAlert("编辑用户成功", "success", 3);
                    this.hideModal();//关闭窗体
                    this.$emit("change",data);//组件传值，即向父级模态框中传递值，采用change方式，目标刷新主列表使用
                }else {
                    handleAlert("编辑用户失败", "error", 3);
                }            
            });
        }).catch(()=>{});//注意这里，这里是重点！！！;   
     },
     showModal(id) {
       id = id.join(",");
       this.restForm();
       this.$refs['my-modal'].show();
       this.getUserInfoDetail(id);
     },
     hideModal() {
       this.$refs['my-modal'].hide()
     },
     toggleModal() {
       // 当模态已隐藏时，我们传递要返回焦点的按钮的ID
       this.$refs['my-modal'].toggle('#toggle-btn')
     },
     showDepartSelectModal(){//部门选择器
        this.$refs.DepartSelectRef.showModal()
     },
     showPostSelectModal(){//岗位选择器
        this.$refs.PostSelectRef.showModal()
     },
     restForm(id){
        // Object.assign(this.$data.userInfoForm, this.$options.data().userInfoForm);//新增方式重置方式
        Object.assign(this.$data.userInfoForm, this.userInfoFormOld);//编辑操作重置方式
     },
     getUserInfoDetail(id){
        apiUtil.get(process.env.VUE_APP_SYS_API+"/xtUserinfo/get/"+id).then(({ data }) => {
            this.xt_userinfo_name_old = data.data.xt_userinfo_name;
            this.xt_departinfo_id = data.data.xt_departinfo_id;
            this.xt_userinfo_id = data.data.xt_userinfo_id;
            this.userInfoForm = data.data;
            this.userInfoFormOld = deepClone(data.data);
        });
     },
     getSelectDepartData(data){//接收子组件选中部门值
        this.userInfoForm.xt_departinfo_id = data.id;
        this.userInfoForm.xt_departinfo_name = data.name;
     },
     getSelectPostData(data){//接收子组件选中岗位值
        this.userInfoForm.xt_post_id = data.id;
        this.userInfoForm.xt_post_name = data.name;
     },
     initGender(){//加载性别
        let params = {};
        apiUtil.query(process.env.VUE_APP_SYS_API+"/xtCommon/xtDataDictionary/list/gender", params).then(({ data }) => {
          this.genderList = data.data;
        });
     },
     initNation(){//加载名族
        let params = {};
        apiUtil.query(process.env.VUE_APP_SYS_API+"/xtCommon/xtDataDictionary/list/xt_userinfo_nation", params).then(({ data }) => {
          this.nationList = data.data;
        });
     },
     initHighestDegree(){//加载文化程度数据字典
        let params = {};
        apiUtil.query(process.env.VUE_APP_SYS_API+"/xtCommon/xtDataDictionary/list/xt_userinfo_highestDegree", params).then(({ data }) => {
          this.highestDegreeList = data.data;
        });
     },
     initWorkYear(){//加载工作年限数据字典
        let params = {};
        apiUtil.query(process.env.VUE_APP_SYS_API+"/xtCommon/xtDataDictionary/list/xt_userinfo_workYear", params).then(({ data }) => {
          this.workYearList = data.data;
        });
     },
     initState(){//加载状态数据字典
        let params = {};
        apiUtil.query(process.env.VUE_APP_SYS_API+"/xtCommon/xtDataDictionary/list/xt_userinfo_state", params).then(({ data }) => {
          this.stateList = data.data;
        });
     },
     initMarried(){//加载是否已婚数据字典
        let params = {};
        apiUtil.query(process.env.VUE_APP_SYS_API+"/xtCommon/xtDataDictionary/list/xt_userinfo_ismarried", params).then(({ data }) => {
          this.marriedList = data.data;
        });
     },
     validateUser(xt_userinfo_name){
        if(this.xt_userinfo_name_old != xt_userinfo_name){
            if(xt_userinfo_name){
                let params = {};
                apiUtil.query(process.env.VUE_APP_SYS_API+"/xtUserinfo/validate/"+xt_userinfo_name, params).then(({ data }) => {
                    if(data.message == 1){
                        handleAlert("该用户名已经被注册，请重新输入!", "error", 3);
                        this.userInfoForm.xt_userinfo_name = "";
                    }
                });
            } 
        }               
     }
   }
}
</script>

<style>
</style>